<template>
	<el-dialog :showUpdateLogo width="600px" :close-on-click-modal="false" @close="closeDialog(ruleFormRef)">
		<TitleBox :title="title"></TitleBox>
		<el-upload
            class="avatar-uploader"
            action="http://10.66.39.142:8090/api/v1/system/user/login"
            accept="image/png, image/jpeg, image/jpg"
            :show-file-list="false"
            :on-success="handleAvatarSuccess">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon">请点击选择logo</i>
        </el-upload>
        <el-alert
            v-show=showTip
            title="请选择图片"
            type="error">
        </el-alert>
        <el-form-item class="el-form-footer">
            <div style="width: 100%; text-align: center;">
                <el-button style="background-color: #ccc; color: white" @click="handleCancle">取消</el-button>
                <el-button type="primary" @click="handleConfirm()">确定</el-button>
            </div>
        </el-form-item>
	</el-dialog>
</template>

<script setup lang='ts'>
import { upLoadLogo } from "@/api/account/index";
import { ref } from "vue";
import TitleBox from "@/components/titleBox/index.vue";

const title = ref("更新LOGO");

defineProps(["showUpdateLogo"]);

const ruleFormRef = ref();
const imageUrl = ref();
const imageData = ref();
const showTip = ref(false);

const emit = defineEmits(["cancle", "confirm", "callParent"]);

// 关闭对话框，清空数据
const closeDialog = (formEl: any) => {
    imageUrl.value = undefined;
    imageData.value = undefined;
	if (!formEl) return;
	formEl.resetFields();
};

const handleAvatarSuccess = (res: any, file: { raw: Blob | MediaSource; }) => {
    imageUrl.value = URL.createObjectURL(file.raw);
    imageData.value = file.raw;
}

// 点击取消
const handleCancle = () => {
    imageUrl.value = undefined;
    imageData.value = undefined;
	emit("cancle");
};

// 点击确定
const handleConfirm = async () => {
    if(imageData.value === undefined){
        showTip.value = true;
        setTimeout(() => {
            showTip.value = false;
        }, 3000);
    }else{
        const formData = new FormData();
        formData.append('file', imageData.value);
        formData.append('name', 'logo');
        upLoadLogo(formData).then((e) => {
            emit('callParent');
        });
        emit("confirm");
    }
};
</script>

<style scoped lang='scss'>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 580px;
        height: 125px;
        line-height: 125px;
        text-align: center;
    }
    .avatar {
        width: 580px;
        height: 125px;
        display: block;
    }
</style>
